<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="40%"
    top="13vh"
    :before-close="closeHandle"
    :close-on-click-modal="false">
    <div v-show="!optType" class="replyContent">
      被回复评论: {{ replyContent }}
    </div>
    <el-form :model="commentForm" :rules="commentRules" ref="commentForm" label-width="85px"
             @keyup.enter.native="saveCommentHandle" @keyup.esc.native="closeHandle(false)">
      <el-form-item label="评论内容" prop="content">
        <el-input
          type="textarea"
          resize="none"
          maxlength="500"
          :autosize="{ minRows: 4, maxRows: 4}"
          placeholder="请输入评论内容"
          v-model="commentForm.content">
        </el-input>
      </el-form-item>
      <el-form-item label="作者点赞" prop="authorLike">
        <el-radio-group v-model="commentForm.authorLike">
          <el-radio :label="0" border>点赞</el-radio>
          <el-radio :label="1" border>正常</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="评论置顶" prop="topFlag">
        <el-radio-group :disabled="!optType" v-model="commentForm.topFlag">
          <el-radio :label="0" border>置顶</el-radio>
          <el-radio :label="1" border>正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandle(false)">取 消</el-button>
      <el-button :disabled="buttonLoad" type="primary" @click="saveCommentHandle">{{ dialogTitle }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  /**
   * 系统菜单添加或修改插件
   */
  export default {
    name: "add-comment",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 博客评论表单对象
        commentForm: {
          // 被回复评论id
          parentCommentId: undefined,
          // 博客id
          blogId: undefined,
          // 评论区块id（只有’回复‘评论时，该属性才有值）
          blockId: undefined,
          // 被回复用户id（只有’回复‘评论时，该属性才有值）
          parentUserId: undefined,
          // 评论是否点赞[0-点赞 1-正常]
          authorLike: 1,
          // 评论是否置顶[0-置顶 1-正常]
          topFlag: 1,
          // 评论内容
          content: undefined
        },
        // 被回复的评论内容
        replyContent: undefined,
        // 弹出框标题
        dialogTitle: undefined,
        // 评论操作类型[true-添加评论 false-回复评论]
        optType: false,
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 博客评论表单校验规则
        commentRules: {
          content: [
            { required: true, message: '评论内容不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      /**
       * 初始化博客评论弹出框事件
       * @param {string} parentCommentId 被回复评论id
       * @param {string} blogId          博客id
       * @param {string} blockId         评论区块id
       * @param {string} parentUserId    被回复的用户id
       * @param {string} replyContent    被回复的评论内容
       * @param {boolean} type           评论操作类型[true-添加 false-回复]
       */
      initCommentDialog(parentCommentId, blogId, blockId, parentUserId, replyContent, type) {
        this.optType = type
        this.dialogTitle = type ? '添加评论' : '回复评论'

        let commentForm = this.commentForm
        if (!!parentCommentId) {
          // 设置被回复评论id值
          commentForm.parentCommentId = parentCommentId
        }
        // 设置博客id值
        commentForm.blogId = blogId
        if (!!blockId) {
          // 设置评论区块id值
          commentForm.blockId = blockId
        }
        if (!!parentUserId) {
          // 设置被回复用户id值
          commentForm.parentUserId = parentUserId
        }
        if (!!replyContent) {
          // 设置被回复评论内容值
          this.replyContent = replyContent
        }
      },
      /**
       * 保存博客评论事件
       */
      saveCommentHandle() {
        this.$refs['commentForm'].validate((valid) => {
          if (!valid) {
            return false
          }
          // 按钮不可被点击
          this.buttonLoad = true
          this.$axios.$post('/comment/manage/save', this.commentForm)
            .then(() => {
              let message = this.optType ? '保存博客评论成功' : '回复博客评论成功'
              this.notify('success', '提示', message)

              // 关闭博客评论弹出框
              this.closeHandle(true)
            })
            .catch(() => {})
            .finally(() => {
              // 按钮恢复可点击
              this.buttonLoad = false
            })
        })
      },
      // 弹出框关闭处理事件
      closeHandle(bool) {
        // 重置博客评论表单对象
        this.$refs['commentForm'].resetFields();
        let commentForm = this.commentForm
        commentForm.parentCommentId = undefined
        commentForm.blogId = undefined
        commentForm.blockId = undefined
        commentForm.parentUserId = undefined

        if (typeof bool === 'function') {
          bool = false
        }
        // 向上传递事件
        this.$emit('close-comment-dialog', bool)
      },
    },
  }
</script>

<!--
  css字符对应

-->
<style>
  .replyContent {
    margin-bottom: 10px;
  }
</style>
